<template>
  <div>
    <basic-table
      :table-title="tableTitle"
      :data-source="dataSource"
      :data-params="dataParams"
      :multiple-table="false"
      class="mt-4"
    >
      <template v-slot:check="scope">
        <span style="color: #0087FE; cursor: pointer;" @click="check(scope.row)">
          查看
        </span>
      </template>
    </basic-table>

    <Modal
      :data-source="getProDonePersons"
      :data-params="params"
      :show="dialogVisible"
      :descriptions-info="info"
      :descriptions-list="descriptionsList"
      :table-title="tableTitle2"
      :show-type="'both'"
      @close="close"
    />
  </div>
</template>
<script>
import { getProDoneInfos, getProDoneDetail, getProDonePersons } from '@/api/project'

import Modal from '@/components/Modal/Index'
import BasicTable from '@/components/BasicTable/index.vue'

export default {
  name: 'BasicInfos',
  components: { BasicTable, Modal },
  props: {
    projectId: { type: String, default: '' }
  },
  data() {
    return {
      dataSource: () => getProDoneInfos,
      dataParams: {},
      tableTitle: [
        {
          label: '数据等级',
          value: 'DataLevel',
          show: true,
          type: 'text'
        },
        {
          label: '实际造价（万元）',
          value: 'FactCost',
          show: true,
          type: 'text'
        },
        {
          label: '实际面积（平方）',
          value: 'FactArea',
          show: true,
          type: 'text'
        },
        {
          label: '结构体系',
          value: 'StructureType',
          show: true,
          type: 'text'
        },
        {
          label: '施工许可证编号',
          value: 'BuildPermitNum',
          show: true,
          type: 'text'
        },
        {
          label: '实际竣工验收时间',
          value: 'ProDoneDate',
          show: true,
          type: 'text'
        },
        {
          label: '详情',
          show: true,
          type: 'slot',
          slot: 'check'
        }
      ],
      descriptionsList: {
        'BuildPermitNum': '施工许可证编号',
        'ProjectCode': '项目代码',
        'ProDoneNum': '竣工验收编号',
        'FactCost': '实际造价（万元）',
        'FactArea': '实际面积（平方米）',
        'Length': '长度（米）',
        'Span': '跨度（米）',
        'FactSize': '实际建设规模',
        'StructureType': '结构体系',
        'CreateDate': '记录登记时间',
        'Bdate': '实际开工日期',
        'Edate': '实际竣工验收日期',
        'Mark': '备注'
      },
      info: {},
      dialogVisible: false,
      tableTitle2: [
        {
          label: '企业角色',
          value: 'ComRole',
          show: true,
          type: 'text'
        },
        {
          label: '企业名称',
          value: 'ComName',
          show: true,
          type: 'text'
        },
        {
          label: '统一社会信用代码',
          value: 'ComNum',
          show: true,
          type: 'text'
        },
        {
          label: '人员角色',
          value: 'PerType',
          show: true,
          type: 'text'
        },
        {
          label: '人员姓名',
          value: 'PerName',
          show: true,
          type: 'text'
        },
        {
          label: '证件号码',
          value: 'IdCard',
          show: true,
          type: 'text'
        }
      ],
      getProDonePersons: () => getProDonePersons,
      params: null
    }
  },
  created() {
    this.dataParams.projectId = this.projectId
  },
  methods: {
    close(v) {
      this.dialogVisible = v
    },
    //  查看
    check(v) {
      this.dialogVisible = true
      // 请求详情 info
      this.params = {
        id: v.Id,
        projectId: this.projectId
      }
      // 请求数据
      getProDoneDetail(this.params).then(res => {
        if (res.code === 200) {
          this.info = res.data.detail
        }
      })
    }
  }
}
</script>

<style scoped>
.dialog-tab .el-tabs__item.is-active {
  border-bottom: 3px solid #409eff !important;
}
</style>
